<template>
  <div>
    <el-descriptions
      ref="ruleFormRef"
      :column="2"
      direction="vertical"
      v-loading="isLoading"
    >
      <el-descriptions-item width="50%" label="通知时间">
        {{ isNullOrEmpty( formInline?.createdAt ) }}
      </el-descriptions-item>
      <el-descriptions-item width="50%" label="消息类型">
        {{ isNullOrEmpty( formInline?.messageTypeName ) }}
      </el-descriptions-item>
      
      <el-descriptions-item width="50%" label="状态">
        <el-tag :type="formInline?.readStatus==1?'warning':'info'">{{ formInline?.readStatus==1?'未读':'已读' }}</el-tag>
        <!-- {{ isNullOrEmpty( formInline?.readStatus==1?'未读':'已读' ) }} -->
      </el-descriptions-item>
      <el-descriptions-item width="50%" label="通知人员">
        {{ isNullOrEmpty( formInline?.nickname ) }}
      </el-descriptions-item>
      <el-descriptions-item width="50%" label="消息内容">
        {{ isNullOrEmpty( formInline?.content ) }}
      </el-descriptions-item>
    </el-descriptions>
  </div>
</template>

<script setup lang="ts">
import { isNullOrEmpty } from '@/utils/functions'
import { usePageVariablesStoreHook } from "@/store/modules/pageVariables";
const operate = usePageVariablesStoreHook().getOperate();
type FormProps = {
  formInline: infoType;
  isLoading: boolean;
};
const props = withDefaults(defineProps<FormProps>(), {
	formInline: () => ({} as infoType),
	isLoading: false
});
function getRef() {
  return ruleFormRef.value;
}
console.log(operate, "operate");

defineExpose({ getRef });
</script>
